<template>
	<div>
		<el-form :model="query" :inline="true" label-width="130px" size="small">
				<el-form-item :inline="true">
                    <span style="color: #3A3A3A;font-size:16px;margin-left:30px">子账号总数量：{{allNumber}}</span>
                    <span style="color: #3A3A3A;margin-left:60px;font-size:16px;margin-right: 20px;" v-if="CardNum>AlarmRuleNumber">可用数量：{{CardNum}}</span>
					<span style="color: #3A3A3A;margin-left:60px;font-size:16px;color:red;margin-right: 20px;" v-else>可用数量：{{CardNum}}</span>
				</el-form-item>
				<el-form-item>
					<div style="text-align:center">
						<el-button type="primary" @click="openWin" size="small">报警规则设置</el-button>
						<el-button type="primary" @click="downloadCardTemplate" size="small">导入模板下载</el-button>
					</div>
				</el-form-item>
				<el-form-item>
					<el-upload
                          class="upload-demo"
                          :action="uploadUrl"
                          :multiple="false"
                          :show-file-list="false" 
						  :headers="uploadHeaders"
						  :on-success="uploadSuccess"
						  :on-error="uploadError"
						  accept=".xls"
                          >
                          <el-button type="primary" size="small">导入</el-button>
                        </el-upload>
				</el-form-item>
			</el-form>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<el-form-item label="申请状态：" class="query-form-item">
				<el-select v-model="query.isBinding" placeholder="请选择状态" @change="onSubmit" clearable>
					<el-option label="全部" value=""></el-option>
					<el-option label="未绑定" value="0"></el-option>
					<el-option label="已绑定" value="1"></el-option>
				</el-select>
			</el-form-item>
			<!-- 申请子账号查询 -->
			<el-form-item label="子账号：" class="query-form-item">
				<el-input v-model="query.childcardno" placeholder="请输入子账号" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 申请商城账号查询 -->
			<el-form-item label="商城账号：" class="query-form-item">
				<el-input v-model="query.usermobile" placeholder="请输入商城账号" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 查询框 -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- table表单 -->
		<el-table ref="multipleTable" v-loading="loading" :data="tableData"
			:header-cell-style="{background:'#F4F4F5',color:'#606266'}" border>
			<el-table-column label="序号" type="index" width="80" align="center">
				<template scope="scope">
					<span>{{(query.currentPage - 1) * query.pageSize + scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column label="是否绑定" align="center" width="150">
				<template slot-scope="scope">
                   <span v-if="scope.row.isBinding == 0" >未绑定</span>
                   <span v-else-if="scope.row.isBinding == 1">已绑定</span>
                </template>
			</el-table-column>
			<el-table-column label="子账号" prop="childcardno" align="center"  />
			<el-table-column label="商城账号" prop="usermobile" align="center"  />
			<el-table-column label="商城企业名称" prop="enterprisename" align="center"  />
			<el-table-column label="社会统一信用码" prop="registrationnumber" align="center"  />
		</el-table>

		<el-pagination class="pagination-container" background :page-size="query.pageSize"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total,sizes,prev, pager, next, jumper" :current-page="this.query.currentPage"
			:page-sizes="[10, 20, 30, 50]" :total="totalNumber"></el-pagination>

		<el-dialog
		class="win-card"
          title="提示"
          :visible.sync="centerDialogVisible"
          width="30%"
		  :close-on-click-modal="false"
          center>
		  <el-form :model="guizeForm"  size="small"  :rules="rules" ref="cardForm">
			<el-form-item label="报警阈值：" class="query-form-item" prop="num"  label-width="180px">
				<el-input v-model.number="guizeForm.num" placeholder="请输入阈值" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
			<el-form-item label="报警通知手机号：" class="query-form-item" prop="phone" label-width="180px">
				<el-input v-model="guizeForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
		</el-form>
		<!-- <div style="width:100%;text-align:center">确定要保存规则？</div> -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="isSaving" @click="setAlarmRule('cardForm')">确 定</el-button>
          </span>
        </el-dialog>	
	</div>

</template>
<script>
	import {BASE_URL} from "../../config/app";
	import {
		setAlarmRule,//报警规则设置
		queryHousekeeperCardHDPage,//管家卡列表
		queryAlarmRule,//报警规则查询
		// exportCardData,//导入管家卡数据
		// downloadCardTemplate,//导入模板下载
		queryCardNum//查询可用管家卡数量
	} from "../../api/fundsManagement/index";
	export default {
		data() {
			return {
				isSaving:false,//加载中的状态
				tableData: [], //列表集合
				query: {
					currentPage: 1,
					pageSize: 10,
					usermobile: "",
					isBinding:'',
					childcardno:'',
				},
				totalNumber: 0,
				allNumber:0,
				AlarmRuleNumber:1,//报警规则数量
				AlarmRulePhone:'',//报警规则手机号
				CardNum:0,//可用管家卡数量
				loading: false,
				centerDialogVisible:false, //弹窗开关
				guizeForm:{
					id:'',
					num:'',
					phone:''
				},
				uploadUrl:BASE_URL + "/goldendays-user/houseCard/exportCardData",
				uploadHeaders:{
					"X-Adminid":this.$store.getters.adminId,
					"Authorization":this.$store.getters.token
				},
				 rules:{
					 phone: [
                        { required: true, message: "请输入手机号", trigger: "blur" },
                        // 这个只能验证手机号
                        // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
                        { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号", trigger: "blur" }
                    ],
					num: [
						{ required: true, message: "请输入阈值", trigger: "blur" },
						{ type: 'number', message: '阈值必须为数字值',trigger: 'blur'}
					]
				 }
			}
		},
		methods: {
			uploadSuccess(res,file, fileList){
				if (res.code != 0) {
							this.$message.error(res.message);
							this.loading = false;
							return false;
					}
					this.queryCardNum()
		        	this.queryAlarmRule()
			        this.getList()
					this.getTotalNumber()
					this.$message.success('上传成功');
					// console.log(res,file, fileList)
			},
			uploadError(err,file, fileList){
				this.$message.error(err.message);
				// console.log(err,file, fileList)
			},
			openWin(){
				this.guizeForm.num=Number(this.AlarmRuleNumber)
				this.guizeForm.phone=this.AlarmRulePhone
				this.centerDialogVisible=true
			},
			//报警规则设置
			setAlarmRule(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.isSaving=true
						setAlarmRule(this.guizeForm)
							.then((res) => {
								if (res.code != 0) {
									this.$message.error(res.message);
									this.isSaving=false
									return false;
								}
								this.AlarmRuleNumber=this.guizeForm.num
								this.AlarmRulePhone=this.guizeForm.phone
								this.$message.success("规则修改成功");
								this.centerDialogVisible=false
								this.isSaving=false
							})
							.catch((err) => {
								this.isSaving=false
								console.log(err);
							});
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			//查询可用管家卡数量
			queryCardNum(){
				queryCardNum()
				.then(res=>{
					if (res.code != 0) {
							this.$message.error(res.message);
							this.loading = false;
							return false;
					}
					this.CardNum=res.data
				})
				.catch(err=>{
					console.log(err)
				})
			},
			//报警规则查询
			queryAlarmRule(){
				queryAlarmRule()
				.then(res=>{
					if (res.code != 0) {
							this.$message.error(res.message);
							this.loading = false;
							return false;
					}
					this.AlarmRuleNumber=res.data.num
					this.AlarmRulePhone=res.data.phone
					this.guizeForm.id=res.data.id
				})
				.catch(err=>{
					console.log(err)
				})
			},
			//导入模板下载
			downloadCardTemplate(){
				var urls=BASE_URL + "/goldendays-user/houseCard/downloadCardTemplate"
				window.location.href = urls
				 
				//  window.open(urls, '_blank'); // 新开窗口下载
			},
			// 列表数据获取
			getList() {
				this.loading = true;
				queryHousekeeperCardHDPage(this.query)
					.then(data => {
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						}
						this.tableData = data.data.list || []
						this.totalNumber = data.data.totalNumber || 0;
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						console.log(err)
						this.loading = false;
						this.tableData = []
					})
			},
			// 获取总数
			getTotalNumber(){
				var form={
					currentPage: 1,
					pageSize: 1,
					usermobile: "",
					isBinding:'',
					childcardno:'',
				}
				queryHousekeeperCardHDPage(form)
					.then(data => {
						this.allNumber = data.data.totalNumber || 0;
					})
					.catch((err) => {
						console.log(err)
					})
			},
			//查询
			onSubmit() {
				this.query.currentPage = 1;
				this.getList()
				// console.log('submit!');
			},
			handleCurrentChange(val) {
				this.query.currentPage = val;
				//scrollTo(0, 800);
				this.getList()
			},
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getList()
			},
		},

		mounted() {
			this.queryCardNum()
			this.queryAlarmRule()
			this.getList()
			this.getTotalNumber()
		},
		created() {
			
		}

	}
</script>
<style>
.win-card .el-form-item__label {
    width: 100%;
    text-align: center
}
</style>